<template>
       <div class="content-floor">
         <div class="left">
           <div>
             <img src="//m.360buyimg.com/n1/jfs/t1/176230/2/11387/149354/60adaa76E09a51402/d22d91625e0884fc.jpg!q70.jpg" alt="">
           </div>
            <span>每200减30</span>
         </div>
         <div class="center">
           <div><img src="//m.360buyimg.com/n1/jfs/t1/106851/34/461/375825/5dae7dbcEa0b17dc2/5dc110597ce8fc6b.jpg!q70.jpg" alt=""></div>
           <div style="margin-left: -1rem"><img src="//m.360buyimg.com/n1/jfs/t11266/172/3136897597/311385/898550cb/5ce41430N7bb10f75.jpg!q70.jpg" alt=""></div>
         </div>
         <div class="right">
           <div><img src="//m.360buyimg.com/n1/jfs/t1/195790/18/6903/122925/60bf3e01E0aab886e/8678fe2424b836d5.jpg!q70.jpg" alt=""></div>
           <span>好物一元秒</span>
         </div>
       </div>
</template>

<script>
export default {
  name: "content-floor"
}
</script>

<style scoped>

    .content-floor{
      width: 100%;
      height: 7.1875rem;
      display: flex;
      overflow: hidden;
      color: #ffffff;
      font-size: 0.625rem;
      position: relative;
      z-index: 2;

    }
    .left{
      width:10.625rem;
      height: 7.1875rem;
      background-image: url("//m.360buyimg.com/mobilecms/s270x345_jfs/t1/179455/2/7420/19260/60b9f68cEa7619fe8/16a756e7c262f59f.png!q70.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;

    }
    .left div{
      width: 4.3rem;
      height: 3.9rem;
      padding-top: 0.9rem;
      position: relative;
      z-index: -1;
    }
    .left div img{
      width: 4.2rem;
      height: 3.9rem;
      border-radius: 0.625rem;
      border-bottom-right-radius: 0.525rem;
      margin-left: 0.1875rem;
    }
    .left  span{
     margin-top: -1.2rem;
      padding-left: .5rem;
    }
    .center{
      width: 23.1875rem;
      height: 7.1875rem;
      background-image: url("//m.360buyimg.com/mobilecms/jfs/t1/187456/35/7502/198223/60c1ba4bE053c1b96/2dbde817d28f2d4a.gif");
      background-repeat: no-repeat;
      background-size:100% 100%;
      display: flex;
      justify-content: space-around;


    }
    .center div{
      width: 4.375rem;
      height: 4.375rem;
      margin-top: 1.3rem;
      margin-left:0.5rem;
      border-radius: 0.625rem;
     position: relative;
      z-index: -1;

    }
    .center div img{
      width: 100%;
      border-radius: 0.625rem;

    }
    .right{
      width: 10.625rem;
      height: 7.1875rem;
      background-image: url("//m.360buyimg.com/mobilecms/s270x345_jfs/t1/184319/1/7449/20340/60b9f7a9Ef6f93990/3b49575eadfa1e08.png!q70.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;

    }
    .right div{
      width: 4.0625rem;
      height: 4.0625rem;
      border-radius: 0.625rem;
      margin-top: 1.4rem;
      margin-left: .6rem;
      position: relative;
      z-index: -1;
    }
    .right div img{
      width: 100%;
      border-radius: 0.625rem;
    }
    .right  span{
      font-size: 0.75rem;
      font-weight: bold;
      margin-left: -0.15rem;
    }
</style>